import { size, IFormProps, pageSize, dateTimeFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select } from "antd";
import { PaginationProps } from "antd/lib/pagination";
// import moment from 'moment';
const Styles = require("../../styles/index.less");
import * as api from "../../api/api";
import ActiveEdit from "../../components/malls/ActiveEdit";

export interface IActivesPros extends IFormProps {
  mall: any;
}
class Actives extends React.PureComponent<IActivesPros, any> {
  constructor(props) {
    super(props);
  }

  state = {
    visible: false
  };

  componentDidMount() {
    this.getActives();
  }

  search = () => {
    this.getActives();
  };

  getActives = (payload?) => {
    payload = Object.assign({}, this.props.form.getFieldsValue(), {
      ...payload
    });
    this.props.dispatch({
      type: "mall/getActives",
      payload
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  edit = (active = {}) => {
    this.setVisible(true);
    this.props.dispatch({
      type: "mall/save",
      payload: { active }
    });
  };

  setVisible = (visible = false) => {
    this.setState({ visible });
  };

  save = form => {
    let { active } = this.props.mall;
    form = Object.assign({}, active, form);
    this.props.dispatch({
      type: "mall/saveActive",
      payload: {
        form,
        callback: () => {
          this.setVisible();
          this.search();
        }
      }
    });
  };

  setEnable = (form, enabled) => {
    form.enabled = enabled;
    this.props.dispatch({
      type: "mall/saveActive",
      payload: {
        form,
        callback: () => {
          this.getActives();
        }
      }
    });
  };

  moveUp = id => {
    this.props.dispatch({
      type: "mall/moveUpActive",
      payload: {
        form: { id },
        callback: () => {
          this.getActives();
        }
      }
    });
  };

  moveDown = id => {
    this.props.dispatch({
      type: "mall/moveDownActive",
      payload: {
        form: { id },
        callback: () => {
          this.getActives();
        }
      }
    });
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const {
      active,
      actives: { items }
    } = this.props.mall;
    const { visible } = this.state;
    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Col span={24}>
            <Form layout="inline">
              <Form.Item>
                <Button
                  size={size}
                  type="primary"
                  loading={loading}
                  onClick={this.search}
                >
                  查询
                </Button>
              </Form.Item>
            </Form>
            <Col span={24}>
              <hr className={Styles.hrBorder} />
              <h3>活动列表</h3>
            </Col>
            <Col span={24}>
              <Table
                dataSource={items}
                bordered
                pagination={false}
                rowKey={(record: api.SingleUserMallMallVOActiveVO) =>
                  String(record.id)
                }
                loading={loading}
              >
                <Table.Column
                  title="序号"
                  key="no"
                  render={(text, record, index) => {
                    return index + 1;
                  }}
                />
                <Table.Column title="名称" key="name" dataIndex="name" />
                <Table.Column
                  title="位置"
                  key="description"
                  dataIndex="description"
                />
                <Table.Column
                  title="需完成次数"
                  key="times"
                  dataIndex="times"
                />
                <Table.Column
                  title="奖励金额"
                  key="amount"
                  dataIndex="amount"
                />
                <Table.Column
                  title="状态"
                  key="creationTime"
                  render={(
                    text,
                    record: api.SingleUserMallMallVOActiveVO,
                    index
                  ) => {
                    return record.enabled ? "启用" : "禁用";
                  }}
                />
                <Table.Column
                  title="操作"
                  render={(
                    text,
                    record: api.SingleUserMallMallVOActiveVO,
                    index
                  ) => {
                    return (
                      <div>
                        <a
                          className={Styles.M_RIGHT}
                          onClick={() => this.edit(record)}
                        >
                          编辑
                        </a>
                        {!record.enabled ? (
                          <a
                            className={Styles.M_RIGHT}
                            onClick={() => this.setEnable(record, true)}
                          >
                            启用
                          </a>
                        ) : (
                          <a
                            className={Styles.M_RIGHT}
                            onClick={() => this.setEnable(record, false)}
                          >
                            禁用
                          </a>
                        )}
                        {index > 0 ? (
                          <a
                            className={Styles.M_RIGHT}
                            onClick={() => this.moveUp(record.id)}
                          >
                            上移
                          </a>
                        ) : null}
                        {index < items.length - 1 ? (
                          <a
                            className={Styles.M_RIGHT}
                            onClick={() => this.moveDown(record.id)}
                          >
                            下移
                          </a>
                        ) : null}
                      </div>
                    );
                  }}
                />
              </Table>
            </Col>
          </Col>
        </Row>
        {visible ? (
          <ActiveEdit
            visible={visible}
            active={active}
            onSave={this.save}
            onCancel={this.setVisible}
          />
        ) : (
          undefined
        )}
      </Row>
    );
  }
}

export default connect(({ mall, loading: { models: { mall: loading } } }) => ({
  mall,
  loading
}))(Form.create()(Actives));
